<template>
  <div class="add-product">
    <el-row>
      <el-col :span="13" :offset="3" class="add-center">
        <el-steps :active="active" align-center finish-status="success">
          <el-step title="填写商品信息"></el-step>
          <el-step title="填写商品促销"></el-step>
          <el-step title="填写商品属性"></el-step>
          <el-step title="选择商品关联"></el-step>
        </el-steps>
        <!-- 商品信息表单 -->
        <GoodsInfoForm 
          v-if="active == 0" 
          @nextPage='nextActive(true)'
          :goodsInfo="goodsInfo"
        ></GoodsInfoForm>
        <!-- 商品促销表单 -->
        <GoodsPromotionForm 
          v-if="active == 1"
          :goodsInfo="goodsInfo"
          @lastStep="nextActive(false)"
          @nextStep="nextActive(true)"
        ></GoodsPromotionForm>
        <!-- 商品属性表单 -->
        <GoodsAttrForm 
          v-if="active == 2"
          :goodsInfo="goodsInfo"
        ></GoodsAttrForm>
        <!-- 商品关联表单 -->
        <GoodsRelForm v-if="active == 3"></GoodsRelForm>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import GoodsInfoForm from "@/components/addProduct/GoodsInfoForm";
import GoodsPromotionForm from "@/components/addProduct/GoodsPromotionForm";
import GoodsAttrForm from "@/components/addProduct/GoodsAttrForm";
import GoodsRelForm from "@/components/addProduct/GoodsRelForm";

export default {
  name: "addProduct",
  components: {
    GoodsInfoForm,
    GoodsPromotionForm,
    GoodsAttrForm,
    GoodsRelForm,
  },
  data() {
    return {
      active: 0,
      goodsInfo: {
        productCategoryId: "",
        name: "",
        subTitle: "",
        brandId: "",
        description: "",
        productSn: "",
        price: "",
        originalPrice: "",
        stock: "",
        unit: "",
        weight: "",
        sort: "",
        giftPoint:"", //赠送积分
        giftGrowth:"", //赠送成长值
        usePointLimit:"",//积分购买限制
        previewStatus:0,//预告商品
        newStatus:0,//新品
        recommandStatus:0, //推荐
        serviceIds:[],//服务保证
        detailTitle:"",//详细页标题
        detailDesc:"",//详细页描述
        keywords:"",//商品关键字
        note:"",//商品备注
        promotionStartTime:"",//促销开始时间
        promotionEndTime:"",//促销结束时间
        promotionPrice:"",//促销价格
        huangjinPrice:"",//黄金价格
        baijinPrice:"",//白金价格
        zuanshiPrice:"",//钻石价格
        promotionType:"",//属性类型
      },
    };
  },
  methods: {
    nextActive(v) {
      if(v){
        this.active++
      }else{
        this.active--
      }
    },
  },
};
</script>

<style scoped lang="less">
.add-product {
  .add-center {
    border: 1px solid #eee;
    padding: 20px;
  }
}

.el-steps{
  margin-bottom: 50px;
}
</style>